<template>
    <!--今日推荐-->
    <div class="today-recommend">
        <div class="py-container">
            <div class="clock">
                <div class="time">
                    <img src="./images/clock.png" alt="clock" />
                    <h3>今日推荐</h3>
                </div>
            </div>
            <div class="banners">
                <div v-for="(item, index) in todays" :key="index" class="banner">
                    <img :src="item.src" :alt="item.alt" />
                </div>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            todays: [
                { id: 1, src: require("./images/today01.png"), alt: "today01" },
                { id: 2, src: require("./images/today02.png"), alt: "today02" },
                { id: 3, src: require("./images/today03.png"), alt: "today03" },
                { id: 4, src: require("./images/today04.png"), alt: "today04" },
            ]
        }
    },
}
</script>

<style scoped>
.today-recommend {
    width: 1200px;
    margin: 0 auto;
}

.py-container {
    height: 165px;
    background-color: #eaeaea;
    margin: 20px 0;
    display: flex;
}

.clock {
    width: 16.67%;
    background-color: #5c5251;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

.clock .time {
    padding: 20px 0px;
}
.clock img { 
    width: 70px;
    height: 70px;
}

.clock h3 {
    margin: 9px 0;
    font-weight: 700;
    font-size: 18px;
    line-height: 30.06px;
}

.banners {
    display: flex;

}

.banner img {
    width: 100%;
    height: 100%;
    transition: all 400ms ease;
}

.banner img:hover {
    opacity: 0.7;
    transform: scale(1.1);
}
</style>